import { Form, Input, Checkbox, Button, message } from 'antd'
import { UserOutlined, LockOutlined, KeyOutlined } from '@ant-design/icons'
import React from 'react'
import style from './login.module.scss'
import { getCode, login } from '@/api/login'
import { useRouter } from 'next/router'
import { getStaging } from '@/utils/getStaging'

function Login() {
    const router = useRouter()
    const [captchaSVG, setCode] = React.useState<string | null>(null)
    React.useEffect(() => {
        getCode().then((res) => {
            setCode(res.data.body)
        })
    }, [])

    // 提交表单
    const onSubmin = (values: any) => {
        login(values).then((res) => {
            const {
                data: {
                    body: {
                        token = ''
                    } = {},
                    code = '000',
                    message: messageContent = ''
                } = {}
            } = res;
            if (code !== '200') {
                message.error(messageContent)
            } else {
                message.success('登录成功')
                localStorage.setItem('token', token)
                router.push({ pathname: '/system' })
            }
        })
    }

    // 重新获取验证码
    const refetchCode = () => {
        getCode().then((res) => {
            setCode(res.data.body)
        })
    }

    return (
        <div className={style.login_wapper}>
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{ remember: true }}
                onFinish={onSubmin}
            >
                <Form.Item
                    name="username"
                    rules={[{ required: true, message: '用户名不能为空' }]}
                >
                    <Input
                        prefix={
                            <UserOutlined className="site-form-item-icon" />
                        }
                        placeholder="请输入用户名"
                    />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '密码不能为空' }]}
                >
                    <Input
                        prefix={
                            <LockOutlined className="site-form-item-icon" />
                        }
                        type="password"
                        placeholder="请输入密码"
                    />
                </Form.Item>
                <Form.Item
                    name="code"
                    rules={[{ required: true, message: '验证码不能为空' }]}
                >
                    <div className='code-item'>
                        <Input
                            className='code-input'
                            prefix={
                                <KeyOutlined className="site-form-item-icon" />
                            }
                            placeholder="请输入验证码"
                        />
                        {captchaSVG ? (
                            <div
                                onClick={refetchCode}
                                className='code-content'
                                dangerouslySetInnerHTML={{ __html: captchaSVG }}
                            />
                        ) : (
                            <p>Loading captcha...</p>
                        )}
                    </div>
                </Form.Item>

                <Form.Item className="login-form-button">
                    <Button
                        type="primary"
                        htmlType="submit"
                    >
                        登 录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
Login.getInitialProps = async (context: { req: any; }) => {
    return {
        ...getStaging(context)
    }
};
export default Login
